<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/pages/salary/index" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">编辑工资单</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="form-card">
				<form class="salary-form" @submit.prevent="saveSalarySlip">
					<input type="hidden" class="hidden-input" v-model="salarySlip.id">

					<!-- 工资信息表单 -->
					<view class="form-section">
						<!-- 发放月份 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">发放月份</text>
									<text class="required-star">*</text>
								</view>
								<picker mode="date" class="date-picker" start="2010-01-01" :end="currentYearMonth"
									:value="selectedMonth" fields="month" @change="onMonthChange">
									<view class="picker-display">
										{{ selectedMonth || '请选择月份' }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 员工 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">员工</text>
									<text class="required-star">*</text>
								</view>
								<picker class="picker-field" mode="selector" :range="employees" range-key="name"
									v-model="selectedEmployee" @change="onEmployeeChange"
									:disabled="salarySlip.status !== 'pending'">
									<view class="picker-display">
										{{ selectedEmployee === -1 ? '请选择员工' : employees[selectedEmployee].name }}
									</view>
								</picker>
							</view>
						</view>

						<!-- 基本工资 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">基本工资</text>
									<text class="required-star">*</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入基本工资" v-model="baseSalary"
									@input="calculateSalary" required>
							</view>
						</view>

						<!-- 绩效工资 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">绩效工资</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入绩效工资"
									v-model="performanceSalary" @input="calculateSalary">
							</view>
						</view>

						<!-- 津贴补贴 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">津贴补贴</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入津贴补贴" v-model="allowance"
									@input="calculateSalary">
							</view>
						</view>

						<!-- 加班费 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">加班费</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入加班费" v-model="overtimePay"
									@input="calculateSalary">
							</view>
						</view>

						<!-- 社会保险 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">社会保险</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入社会保险" v-model="socialSecurity"
									@input="calculateSalary">
							</view>
						</view>

						<!-- 住房公积金 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">住房公积金</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入住房公积金" v-model="housingFund"
									@input="calculateSalary">
							</view>
						</view>

						<!-- 个人所得税 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">个人所得税</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input" placeholder="请输入个人所得税" v-model="incomeTax"
									@input="calculateSalary">
							</view>
						</view>

						<!-- 实发工资 -->
						<view class="form-row">
							<view class="form-field">
								<view class="label-wrapper">
									<text class="field-label">实发工资</text>
									<text class="currency-symbol ml-1">¥</text>
								</view>
								<input type="number" class="text-input font-medium text-primary" placeholder="实发工资"
									v-model="netSalary" disabled>
							</view>
						</view>

						<!-- 备注 -->
						<view class="form-row">
							<view class="form-field textarea-field-wrapper">
								<view class="label-wrapper">
									<text class="field-label">备注</text>
								</view>
								<textarea class="textarea-field" placeholder="请输入备注信息" v-model="salaryRemark"
									rows="3"></textarea>
							</view>
						</view>
					</view>
				</form>
			</view>
		</view>

		<!-- 底部固定按钮区域 -->
		<view class="fixed-bottom-buttons">
			<navigator url="/pageNew/pages/salary/index" class="btn cancel-btn" @click.stop>
				取消
			</navigator>
			<button class="btn save-btn" @click="saveSalarySlip">
				保存
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 工资单ID
				slipId: '',

				// 发放月份
				selectedMonth: '',
				currentYearMonth: this.formatYearMonth(new Date()),

				// 员工列表
				employees: [{
						id: 'EMP001',
						name: '张三',
						department: '技术部',
						position: '高级开发工程师'
					},
					{
						id: 'EMP002',
						name: '李四',
						department: '市场部',
						position: '市场经理'
					},
					{
						id: 'EMP003',
						name: '王五',
						department: '人力资源部',
						position: 'HR专员'
					},
					{
						id: 'EMP004',
						name: '赵六',
						department: '技术部',
						position: '开发实习生'
					},
					{
						id: 'EMP005',
						name: '孙七',
						department: '财务部',
						position: '财务主管'
					}
				],
				selectedEmployee: -1,

				// 工资单数据
				salarySlip: {},

				// 工资明细
				baseSalary: '',
				performanceSalary: '',
				allowance: '',
				overtimePay: '',
				socialSecurity: '',
				housingFund: '',
				incomeTax: '',
				netSalary: '',

				// 备注
				salaryRemark: ''
			};
		},
		onLoad(options) {
			console.log('编辑工资单页面加载完成', options);

			// 获取工资单ID
			this.slipId = options.id;

			// 加载工资单数据
			this.loadSalarySlip();
		},
		methods: {
			// 加载工资单数据
			loadSalarySlip() {
				// 获取本地存储的工资单数据
				let salarySlips = uni.getStorageSync('salarySlips') || [];

				// 查找对应的工资单
				const foundSlip = salarySlips.find(slip => slip.id === this.slipId);

				if (foundSlip) {
					this.salarySlip = foundSlip;

					// 填充表单数据
					this.selectedMonth = foundSlip.month;
					this.selectedEmployee = this.employees.findIndex(emp => emp.id === foundSlip.employeeId);
					this.baseSalary = foundSlip.baseSalary.toString();
					this.performanceSalary = foundSlip.performanceSalary.toString();
					this.allowance = foundSlip.allowance.toString();
					this.overtimePay = foundSlip.overtimePay.toString();
					this.socialSecurity = foundSlip.socialSecurity.toString();
					this.housingFund = foundSlip.housingFund.toString();
					this.incomeTax = foundSlip.incomeTax.toString();
					this.netSalary = foundSlip.netSalary.toString();
					this.salaryRemark = foundSlip.remark || '';
				} else {
					// 如果本地存储中没有找到，使用默认数据
					this.selectedMonth = this.currentYearMonth;
				}
			},

			// 格式化年月
			formatYearMonth(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');

				return `${year}-${month}`;
			},

			// 月份变更
			onMonthChange(e) {
				this.selectedMonth = e.detail.value;
				this.salarySlip.month = this.selectedMonth;
			},

			// 员工变更
			onEmployeeChange(e) {
				this.selectedEmployee = e.detail.value;
				if (this.selectedEmployee !== -1) {
					const employee = this.employees[this.selectedEmployee];
					this.salarySlip.employeeId = employee.id;
					this.salarySlip.employeeName = employee.name;
					this.salarySlip.department = employee.department;
					this.salarySlip.position = employee.position;
				}
			},

			// 计算工资
			calculateSalary() {
				// 将所有数值转换为数字，默认为0
				const base = parseFloat(this.baseSalary) || 0;
				const performance = parseFloat(this.performanceSalary) || 0;
				const allow = parseFloat(this.allowance) || 0;
				const overtime = parseFloat(this.overtimePay) || 0;
				const social = parseFloat(this.socialSecurity) || 0;
				const housing = parseFloat(this.housingFund) || 0;
				const income = parseFloat(this.incomeTax) || 0;

				// 计算实发工资
				const gross = base + performance + allow + overtime;
				const deductions = social + housing + income;
				this.netSalary = (gross - deductions).toFixed(2);

				// 更新工资单对象
				this.salarySlip.baseSalary = base;
				this.salarySlip.performanceSalary = performance;
				this.salarySlip.allowance = allow;
				this.salarySlip.overtimePay = overtime;
				this.salarySlip.socialSecurity = social;
				this.salarySlip.housingFund = housing;
				this.salarySlip.incomeTax = income;
				this.salarySlip.netSalary = parseFloat(this.netSalary);
			},

			// 保存工资单
			saveSalarySlip() {
				// 表单验证
				if (!this.selectedMonth) {
					uni.showToast({
						title: '请选择发放月份',
						icon: 'none'
					});
					return;
				}

				if (this.selectedEmployee === -1) {
					uni.showToast({
						title: '请选择员工',
						icon: 'none'
					});
					return;
				}

				if (!this.baseSalary || parseFloat(this.baseSalary) <= 0) {
					uni.showToast({
						title: '请输入有效的基本工资',
						icon: 'none'
					});
					return;
				}

				// 计算工资
				this.calculateSalary();

				// 获取选中的员工信息
				const employee = this.employees[this.selectedEmployee];

				// 获取本地存储的工资单数据
				let salarySlips = uni.getStorageSync('salarySlips') || [];

				// 查找对应的工资单
				const index = salarySlips.findIndex(slip => slip.id === this.slipId);

				if (index !== -1) {
					// 更新工资单数据
					salarySlips[index].month = this.selectedMonth;
					salarySlips[index].employeeId = employee.id;
					salarySlips[index].employeeName = employee.name;
					salarySlips[index].department = employee.department;
					salarySlips[index].position = employee.position;
					salarySlips[index].baseSalary = parseFloat(this.baseSalary);
					salarySlips[index].performanceSalary = parseFloat(this.performanceSalary) || 0;
					salarySlips[index].allowance = parseFloat(this.allowance) || 0;
					salarySlips[index].overtimePay = parseFloat(this.overtimePay) || 0;
					salarySlips[index].socialSecurity = parseFloat(this.socialSecurity) || 0;
					salarySlips[index].housingFund = parseFloat(this.housingFund) || 0;
					salarySlips[index].incomeTax = parseFloat(this.incomeTax) || 0;
					salarySlips[index].netSalary = parseFloat(this.netSalary);
					salarySlips[index].remark = this.salaryRemark || '';
					salarySlips[index].updatedAt = new Date().toISOString();

					// 保存到本地存储
					uni.setStorageSync('salarySlips', salarySlips);

					// 显示成功提示
					uni.showToast({
						title: '工资单更新成功',
						icon: 'success'
					});

					// 返回工资单管理列表页面
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				} else {
					uni.showToast({
						title: '未找到工资单记录',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style>
	/* 全局容器样式 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		position: relative;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	/* 内容容器样式 */
	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 80px;
		/* 预留底部按钮空间 */
		box-sizing: border-box;
	}

	/* 表单卡片样式 */
	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	/* 表单基础样式 */
	.salary-form {
		width: 100%;
	}

	.hidden-input {
		display: none;
	}

	.form-section {
		margin-bottom: 24px;
	}

	/* 表单行样式 */
	.form-row {
		margin-bottom: 14px;
		padding: 4px 0;
	}

	.form-field {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	/* 标签容器 */
	.label-wrapper {
		width: 100px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 字段标签样式 */
	.field-label {
		font-size: 14px;
		color: #6b7280;
	}

	.required-star {
		color: #f44336;
		margin-left: 4px;
	}

	/* 货币符号样式 */
	.currency-symbol {
		font-size: 14px;
		color: #6b7280;
	}

	/* 输入框样式 */
	.text-input {
		flex-grow: 1;
		height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.text-input::placeholder {
		color: #9ca3af;
		opacity: 1;
	}

	/* 选择器样式 */
	.picker-field {
		flex-grow: 1;
	}

	.picker-display {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding: 0 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		box-sizing: border-box;
	}

	.date-picker {
		flex-grow: 1;
	}

	/* 文本域样式 */
	.textarea-field-wrapper {
		align-items: flex-start;
		padding-top: 8px;
	}

	.textarea-field {
		flex-grow: 1;
		min-height: 80px;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
		resize: vertical;
		box-sizing: border-box;
	}

	/* 底部固定按钮样式 */
	.fixed-bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding: 12px 16px;
		box-sizing: border-box;
		display: flex;
		gap: 12px;
		max-width: 750rpx;
		margin: 0 auto;
	}

	/* 按钮通用样式 */
	.btn {
		flex: 1;
		height: 44px;
		line-height: 44px;
		text-align: center;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	/* 取消按钮样式 */
	.cancel-btn {
		background-color: #f3f4f6;
		color: #4b5563;
		text-decoration: none;
	}

	.cancel-btn:active {
		background-color: #e5e7eb;
	}

	/* 保存按钮样式 */
	.save-btn {
		background-color: #1e88e5;
		color: #ffffff;
		border: none;
	}

	.save-btn:active {
		background-color: #1976d2;
	}
</style>